import 'package:flutter/material.dart';

import 'package:provider/provider.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_easyrefresh/material_footer.dart';
import 'package:oktoast/oktoast.dart';

import 'package:fun/common/global.dart';
import 'package:fun/common/resource.dart';
import 'package:fun/entity/ar_guide.dart';
import 'package:fun/model/ar.dart';
import 'package:fun/widget/loading_view.dart';
import 'package:fun/widget/search_appbar.dart';

///
/// ar页面
///
/// @author zzzz1997
/// @created_time 20200715
///
class ArPage extends StatelessWidget {
  // 状态模型
  final _model = ArModel();

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _loadData(true);
    });
    return ChangeNotifierProvider.value(
      value: _model,
      child: Scaffold(
        appBar: SearchAppBar(
          left: Icon(
            Icons.arrow_back,
            color: Style.iconGrey,
          ),
          bottom: PreferredSize(
            child: Row(
              children: <Widget>[
                _buildTab(context, 'AR导游', selected: true),
                _buildTab(context, 'AR制作'),
                _buildTab(context, 'AR穿越'),
              ],
            ),
            preferredSize: Size(double.infinity, 40),
          ),
          onLeftTap: () {
            Global.navigator.pop();
          },
        ),
        body: Consumer<ArModel>(
          builder: (_, m, __) => LoadingView(
            commonStatus: _model.status,
            isEmpty: _model.arGuides.isEmpty,
            child: EasyRefresh.custom(
              footer: MaterialFooter(enableInfiniteLoad: !_model.noMore),
              onRefresh: () async {
                await _loadData(true);
              },
              onLoad: () async {
                await _loadData(false);
              },
              slivers: [
                SliverPadding(
                  padding: EdgeInsets.only(
                    top: 10,
                  ),
                  sliver: SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (_, i) => _buildArGuide(_model.arGuides[i], i.isEven),
                      childCount: _model.arGuides.length,
                    ),
                  ),
                ),
              ],
            ),
            onErrorTap: () {
              _loadData(true);
            },
          ),
        ),
      ),
    );
  }

  ///
  /// 构建标签
  ///
  Widget _buildTab(context, tab, {bool selected = false}) {
    return Expanded(
      child: Center(
        child: Text(
          tab,
          style: TextStyle(
            color: selected ? Style.colorRed : Global.brightnessColor(context),
          ),
        ),
      ),
    );
  }

  ///
  /// 构建ar导游
  ///
  Widget _buildArGuide(ArGuide arGuide, bool leftImage) {
    Widget image = ImageHelper.networkImage(
      arGuide.cover.url,
      width: Global.mediaQuery.size.width / 2,
      height: Global.mediaQuery.size.width / 2,
      fit: BoxFit.cover,
    );
    Widget text = Expanded(
      child: SizedBox(
        height: Global.mediaQuery.size.width / 2,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '　　${arGuide.description}',
              maxLines: 8,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
    return Row(
      children: <Widget>[
        if (leftImage) image,
        text,
        if (!leftImage) image,
      ],
    );
  }

  ///
  /// 加载数据
  ///
  _loadData(bool isRefresh) async {
    try {
      if (isRefresh) {
        await _model.init();
      } else {
        await _model.loadMore();
      }
    } catch (e) {
      showToast(e.toString());
    }
  }
}
